import {messages} from "share/common";
/**
 * created by zt on 2018/04/20
 */
import React from 'react';
import {Card, Spin, Col, Row, Tooltip} from 'antd';
import 'styles/setting/configuration-center/configuration-center.scss';
import ConfigurationCenterService from 'containers/setting/configuration-center/configuration-center.service';

import {connect} from "react-redux";
import menuRoute from "routes/menuRoute";


class ConfigurationCenter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,  // 加载状态
      data: [], // 数据
      query: {} // 查询条件对象
    }
  }

  componentWillMount() {
    this.initConfigurationQuery();
  }

  componentDidMount() {
    this.getData();
  }

  // 初始化后台查询值
  initConfigurationQuery = () => {
    const { itemIds, tenantInfo } = this.props;
    this.setState({
      query: {
        tenantId: tenantInfo.id, // 租户id
        getDetail: 'N', // 获取配置项详情
        itemIds
      }
    })
  };

  // 获取后台数据
  getData = () => {
    const { moreItems } = this.props;
    const { query } = this.state;
    this.setState({
      loading: true
    });
    ConfigurationCenterService.getConfigurationList(query).then(res => {
      let data = res.data.rows || [];
      moreItems && data.push(...moreItems);
      this.setState({ data, loading: false });
    });
  };

  // 进入配置项详情
  goDetail = (item) => {
    const { pageKey } = this.props;
    let url;
    if (item.configItem) {
      url = menuRoute.getPageUrlByKey(pageKey).replace(':id', item.configItem.id);
    } else {
      url = menuRoute.getPageUrlByKey(item.pageKey);
    }
    this.context.router.push(url);
  };

  // 获取操作按钮信息
  getActions = (item) => {
    const actions = [(
      <div className="set-btn" onClick={() => this.goDetail(item)}>
        {messages('expense-2.key45')/*前往设置*/}
      </div>
    )];
    if (item.configItem) {
      let unsetTip = (
        <div className="unset-text">
          <span className="circle-tip">●</span>
          {messages('expense-2.key46')/*未设置*/}
        </div>
      );
      // item.unsettled  为设置
      if (item.unsettled === 'N') {
        unsetTip = '';
      }
      actions.unshift(unsetTip);
    }
    return actions
  };

  render() {
    const { loading, data } = this.state;
    return (
      <div className="configuration-center">
        {loading ? <Spin size="small"/> : (
          <Row gutter={16}>
            {data.map(item => {
              let config = item.configItem || item;
              return (
                <Col span={8} className="card-wrap" key={config.id || config.key}>
                  <Card title={config.itemName} actions={this.getActions(item)} hoverable={true}>
                    <Tooltip placement="top" title={config.description}>
                      <div className="line-one">{config.description}</div>
                    </Tooltip>
                    <br/>
                    <Tooltip placement="top" title={config.defaultValueDesc}>
                      <div className="line-one">
                        {messages('expense-2.key47')/*默认规则*/}：{config.defaultValueDesc}
                      </div>
                    </Tooltip>
                  </Card>
                </Col>
              )
            })}
          </Row>
        )}
      </div>
    )
  }
}

ConfigurationCenter.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    tenantInfo: state.login.tenant
  }
}

export default connect(mapStateToProps)(ConfigurationCenter);
